<template>
    <div>
        <el-select
            v-model="tmpid"
            filterable
            remote
            reserve-keyword
            placeholder="请选择模板"
            :remote-method="remoteMethod"
            :loading="loading"
            ref="searselect"
            @focus="handleGetOption">
            <el-option
            v-for="item in tmpList"
            :key="item.templateId"
            :label="item.name"
            :value="item.templateId">
            </el-option>
        </el-select>
        <el-form-item label="实例选择：" style="margin-left:15px;margin-bottom: 0;">
         	<baseSelect 
			ref="baseSelect"
			:defaultValue="defaultValue" 
            :placeholder="placeholder"
			:optionList="options" 
			:filterable="true"
			@change="changeHandel"></baseSelect>
        </el-form-item>
    </div>
</template>


<script>
    import { getDataByUrl } from "@/service/components/common"
	import baseSelect from "@/view/components/select/select";
    export default {
        components : {
			baseSelect
		},
        props:[
          "defaultValue",
          "tmpurl",
          "insturl"
        ],
        data(){
            return{
              tmpid:'',
              loading: false,
              tmpList:[],
              options:[],
              placeholder:'请选择',
            }
        },
        mounted() {
            console.log(this.tmpurl)
        },
       
        methods:{
            // 远程搜索  模板
            remoteMethod(query){
                if (query !== '') {
                    this.loading = true;
                        setTimeout(() => {
                            this.loading = false
                            getDataByUrl(this.tmpurl,{name:query}).then(ret=>{
                                if(ret&&ret.code ==0){
                                    this.tmpList = ret.data
                                }
                            })
                    }, 200)
                }
            },
            // 首次拉取数据
            handleGetOption(){
                getDataByUrl(this.tmpurl,{}).then(ret=>{
                    if(ret&&ret.code == 0){
                        this.tmpList = ret.data
                    }
                })
            },
            changeHandel(name ,v){
				this.$emit("change", "searchSelect", v)
            },
            reset(){
                this.tmpid = ''
				this.$refs.baseSelect.reset()
			}
        },
        watch:{
            // 获取实例
           tmpid(val){
               if(val){
                    this.options = []
                    getDataByUrl(this.insturl,{templateId:val}).then(ret=>{
                        if(ret&&ret.code == 0){
                            if(ret.data.data.length){
                                this.placeholder = '请选择'
                                this.options = ret.data.data.map(el=>{
                                    return{
                                        value:el.instId,
                                        label:el.instName
                                    }
                                })
                            }else{
                               this.placeholder = '所选模板下无实例'
                            }
                        }
                    })
               }
           }
        }
    }
</script>
